<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/page-bg1.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' leftIconColor="#ffffff" bgColor="transparent" @leftClick="navBack"  :title="info.title">
				<view slot="center" class="navTitle">
					{{info.title}} 
				</view>
			</u-navbar>
			<view class="testProcess pd30">
				<view class="pt">
					<text>答题进度</text><text class="n1">{{current+1}}</text><text class="n3">/</text><text class="n2">{{info.list?info.list.length:0}}</text>
				</view>
				<view class="pp">
					<u-line-progress height="10rpx" inactiveColor="rgba(255,255,255,0.5)" activeColor="#ffffff" :percentage="(current+1)/(info.list?info.list.length:100)*100" :showText="false"></u-line-progress>
				</view>
			</view>
		</view>
		<view class="flex1 pb50">
			<scroll-view scroll-y="true" class="scrollView pt30 pd30">
				<view class="testMainBox" v-if="info.list">
					<swiper class="main" :indicator-dots="false" :autoplay="false" :duration="300" :touchable="false" :current="current" catchtouchmove="stopPropagation">
						<swiper-item v-for="(i,index) in info.list" catchtouchmove="stopPropagation">
							<view class="qa">
								<view class="qt">
									<view class="tag">
										{{i.type==0?'单选题':'多选题'}}
									</view>
									<view class="it">
										{{i.title}}
									</view>
									<view class="ops">
										<view class="li" :class="result[index].includes(index2)?'selected':''" v-for="(l,index2) in i.options" @tap="selectCheck(index,index2,i.type)">
											<view class="ll">
												{{letters[index2]}}.
											</view>
											<view class="lc">
												{{l}}
											</view>
											<view class="lr">
												<view class="ico">
													<image src="@/static/images/icon-gou.png" mode="aspectFit"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="qb" :class="result[current].length==0?'disabled':''" v-if="i.type==1&&(current+1)<result.length" @tap="goNext">
									下一题
								</view>
								<view class="qb" :class="result[current].length==0?'disabled':''" v-if="(current+1)==result.length" @tap="submit">
									提交
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow:function(){
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			if(page.options['id']){
				this.$data.testId = page.options['id'];
			}
		},
		data() {
			return {
				letters:['A','B','C','D','E','F','G'],
				testId:'101',
				info:{},
				current:0,
				startTime:'',
				endTime:'',
				result:[]
			}
		},
		watch:{
			testId:function(){
				this.getInfo();
			}
		},
		methods: {
			selectCheck(a,b,c){//点击选项,a题目下标b选项下标c题目类型
				var that=this;
				if(c==0){
					that.result[a][0]=b;
					that.goNext();
				}else{
					var arr=that.result[a];
					if(arr.includes(b)){
						var ind=arr.indexOf(b);
						arr.splice(ind,1);
					}else{
						arr.push(b);
					};
					that.result[a]=arr;
				};
				if(a==0){//开始作答，计时开始
					that.startTime=new Date().getTime();
				};
			},
			submit(){
				var that=this;
				if(that.result[that.current].length==0){return};
				that.endTime=new Date().getTime();
				var time=Math.floor((that.endTime-that.startTime)/1000);
				console.log(that.result,time);
				uni.redirectTo({
					url:'/subpage/testComplete/testComplete?id='+that.info.pid
				});
			},
			goNext(){
				var that=this;
				if(that.result[that.current].length==0||(that.current+1>=that.info.list.length)){
					return
				};
				that.current++;
			},
			getInfo(){
				var that=this;
				if(!that.testId){return};
				var res={
					id:101,
					pid:101,
					title:'中小学生心理健康量表',
					list:[
						{
							type:0,//0单选,1多选
							title:'你晚上要睡觉时，总想着明天的功课吗?',
							options:['是','否']
						},
						{
							type:0,//0单选,1多选
							title:'我觉得闷闷不乐，情绪低沉',
							options:['没有或很少时间','小部分时间','相当多时间','绝大部分或全部时间']
						},
						{
							type:1,//0单选,1多选
							title:'最喜欢一天什么时间段？',
							options:['早上','中午','晚上']
						},
						{
							type:0,//0单选,1多选
							title:'你晚上要睡觉时，总想着明天的功课吗?',
							options:['是','否']
						},
						{
							type:0,//0单选,1多选
							title:'我觉得闷闷不乐，情绪低沉',
							options:['没有或很少时间','小部分时间','相当多时间','绝大部分或全部时间']
						},
						{
							type:1,//0单选,1多选
							title:'最喜欢一天什么时间段？',
							options:['早上','中午','晚上']
						}
					]
				};
				that.info=res;
				that.initResult();
			},
			initResult(){
				var that=this;
				if(!that.info.list){return};
				var arr=[];
				that.info.list.map((i,index)=>{arr[index]=[]});
				that.result=arr;
			}
		},
		mounted(){
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.navTitle{
		color: #fff;
	}
	.pb50{
		padding-bottom: 50rpx;
	}
</style>
